<template>
  <q-dialog full-height v-model="createDiag">
    <UserGroupForm mode="create" @submit="closeForm"></UserGroupForm>
  </q-dialog>
  <q-dialog full-height v-model="editDiag">
    <UserGroupForm
      mode="edit"
      :groupId="groupId"
      @update="init"
    ></UserGroupForm>
  </q-dialog>
  <div class="">
    <div class="q-gutter-y-md">
      <q-table
        class="card-radius my-table"
        wrap-cells
        flat
        bordered
        :columns="columns"
        :rows="rows"
        :pagination="{ rowsPerPage: 15 }"
        :filter="filter"
        row-key="id"
        no-data-label="No data found."
        no-results-label="The filter didn't uncover any results"
        @row-click="chooseGroup"
        @row-dblclick="openEditDig"
      >
        <!-- <template v-slot:top-row="props">
            <ColsFilter style="width:100px" :filter="props.cols" ref="colsFilter"></ColsFilter>
          </template> -->
        <template v-slot:top>
          <div class="row justify-between" style="width: 100%">
            <div class="fal page-header">Competence Group</div>
            <div>
              <q-card-actions>
                <q-input
                  borderless
                  dense
                  filled
                  debounce="300"
                  v-model="filter"
                  placeholder="Competence"
                  class="q-mx-md"
                >
                  <template v-slot:append>
                    <q-icon name="search" />
                  </template>
                </q-input>
                <q-btn
                  dense
                  round
                  flat
                  label="Create"
                  class="default-btn"
                  icon="add"
                  @click="createDiag = true"
                ></q-btn>
              </q-card-actions>
            </div>
          </div>
        </template>

        <template v-slot:body-cell-actions="props">
          <q-td>
            <div class="text-left">
              <q-btn
                dense
                round
                flat
                class="edit-btn"
                @click="(evt) => openEditDig(evt, props.row, props.row.id)"
                icon="edit"
              ></q-btn>
              <q-btn
                dense
                round
                flat
                class="del-btn"
                @click="deleteFn(props.row.id)"
                icon="delete"
              ></q-btn>
            </div>
          </q-td>
        </template>

        <template v-slot:no-data="{ icon, message }">
          <div class="full-width row flex-center text-accent q-gutter-sm">
            <!-- <q-icon size="2em" name="sentiment_dissatisfied" /> -->
            <q-icon size="2em" :name="icon" />
            <span> {{ message }} </span>
          </div>
        </template>
      </q-table>
    </div>
    <div v-for="(item, index) in rows" :key="index">
      <div v-if="groupname==item.name">
        <GroupSettingTable :groupname="item.name" ></GroupSettingTable>
      </div>
      </div>

  </div>

</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { computed, ref } from 'vue';
import UserGroupForm from 'src/components/groupSetting/UserGroupForm.vue';
import { deleteGroup, listGroup } from 'src/services/groupSettingService';
import { Group } from 'src/services/type';
import ColsFilter from 'src/components/table/ColsFilter.vue';
import GroupSettingTable from 'src/components/groupSetting/groupSettingTable.vue';

const emit = defineEmits(['selectGroupName', 'afterDelete']);

const createDiag = ref(false);
const editDiag = ref(false);
const groupId = ref();

const groupname = ref()

const align = 'left';
const columns = [
  // {
  //   name: 'id',
  //   label: '#',
  //   field: 'id',
  //   sortable: true,
  //   align,
  //   search: false,
  //   style: 'width: 100px !important',
  //   headerStyle: 'width: 100px !important',
  // },
  // {
  //   name: 'username',
  //   label: 'Username',
  //   field: 'username',
  //   sortable: true,
  //   align,
  // },
  {
    name: 'name',
    label: 'Competence',
    field: 'name',
    sortable: true,
    align,
    headerStyle: 'width: 80% !important',
  },
  {
    name: 'actions',
    label: 'Actions',
    field: 'actions',
    sortable: true,
    align,
  },
];

const $q = useQuasar();

const filter = ref('')

const rows = ref<Group[]>([]);

const colsFilter = ref<typeof ColsFilter>();

async function init() {
  const res = await listGroup();
  rows.value = res;
}

function closeForm() {
  createDiag.value = false;
  init();
}

function filterFn(row: Group) {
  if (colsFilter.value) {
    return colsFilter.value.filterFn(row);
  }
}

const filterRows = computed(() => {
  return rows.value.filter(filterFn);
});

function deleteFn(id: number) {
  $q.dialog({
    title: 'Confirm',
    message: 'Are you sure to delete this record?',
    cancel: true,
  }).onOk(async () => {
    rows.value = [...rows.value.filter((item) => item.id != id)];
    await deleteGroup(id);
    $q.notify({
      message: 'success',
      color: 'positive',
    });
    init();
    emit('afterDelete');
  });
}

init();

function chooseGroup(evt: Event, row: Group, index: number) {
  // emit('selectGroupName', row.name);
  groupname.value = row.name
}

function openEditDig(evt: Event, row: Group, index: number) {
  editDiag.value = true;
  groupId.value = row.id;
}
</script>
